import { useContext, useEffect, useState } from 'react';
import WaitThumbIcon from '../../icon/WaitThumbIcon';
import WaitListIcon from '../../icon/WaitListIcon';
import { InBizUploadCtx } from '../../../context';

interface IProps {
  id: string | number;
  className?: string;
  status: string
}

const WaitButton = (props: IProps) => {
  const { id, status } = props;
  const { statusEnum, thumbnail } = useContext(InBizUploadCtx);
  const [isWaiting, setIsWaiting] = useState(false);
  const showWaitIconList = [statusEnum.SUBMITTING, statusEnum.QUEUED, statusEnum.UPLOAD_RETRYING];

  useEffect(() => {
    if (showWaitIconList.includes(status)) {
      setIsWaiting(true);
    } else {
      setIsWaiting(false);
    }
  }, [id, status])

  return isWaiting ? (
    <button
      aria-label="wait"
      className={thumbnail ? 'react-fine-uploader-wait-button' : 'react-fine-uploader-list-wait-button'}
      type="button"
    >
      {thumbnail ? <WaitThumbIcon /> : <WaitListIcon />}
    </button>
  ) : null;
};

export default WaitButton;
